<template>
  <div>
    <div v-for="(item, index) in data.data.pringSettingList" :key="index">
      <span style="margin-bottom: 12px">{{ item.title }}</span>
      <el-table :data="item.datePricingList" style="width: 100%">
        <el-table-column prop="id" label="id" width="180"> </el-table-column>
        <el-table-column prop="sex" label="性别" width="180"> </el-table-column>
        <el-table-column prop="price" label="价格">
          <template slot-scope="scope">
            <input type="text" v-model="scope.row.price" />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="cloneAlerts"
    >
      <ul>
        <li v-for="changedItem in changedData" :key="changedItem.id">
          {{ changedItem.id }} - {{ changedItem.sex }} - {{ changedItem.price }}
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cloneAlerts">取消</el-button>
        <el-button type="primary" @click="cloneAlerts">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import data from "./data.js";

export default {
  data() {
    return {
      data, // 原始数据
      dialogVisible: false, // 对话框可见性
      changedData: [], // 改变的数据
      OldData: JSON.parse(JSON.stringify(data)), // 克隆原始数据作为旧数据
    };
  },

  mounted() {
    this.setupWatcher(); // 设置监听器
  },

  methods: {
    cloneAlerts() {
      this.dialogVisible = false; // 关闭对话框
      this.changedData = []; // 清空改变的数据
    },

    setupWatcher() {
      this.data.data.pringSettingList.forEach((item) => {
        item.datePricingList.forEach((row) => {
          this.$watch(
            () => row.price,
            () => {
              this.handleChange(row); // 监听价格变化并处理
            }
          );
        });
      });
    },

    handleChange(changedItem) {
        console.log('价格变化了',changedItem);
        
      changedItem.price = Number(changedItem.price); // 将价格转换为数字类型
      const index = this.changedData.findIndex(
        (item) => item.id === changedItem.id
      );
      if (index === -1) {
        this.changedData.push(changedItem); // 如果改变的数据在列表中不存在，则添加到改变的数据列表中
      } else {
        this.changedData[index] = changedItem; // 如果改变的数据在列表中存在，则更新该数据
      }
    },

    submit() {
      const oldList = [];
      this.OldData.data.pringSettingList.forEach((item) =>
        oldList.push(...item.datePricingList)
      );
      this.changedData = this.changedData.filter((item) => {
        const oldItem = oldList.find((old) => old.id === item.id);
        return oldItem && oldItem.price !== item.price; // 筛选出价格有变化的数据
      });
      if (this.changedData.length !== 0) {
        this.dialogVisible = true; // 如果改变的数据列表不为空，则显示对话框
      } else {
        console.log("什么都没改变！！！"); // 如果改变的数据列表为空，则输出提示信息
      }
    },
  },
};
</script>
<style scoped></style>
